@import '../../styles/var.scss';

.m-tag {
  display: inline-block;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: $font-size-small;
  line-height: 1em;

  &:not(.m-tag-plain) {
    &.m-tag-primary {
      background-color: rgba($color-primary, 0.1);
    }

    &.m-tag-success {
      background-color: rgba($color-success, 0.1);
    }

    &.m-tag-warning {
      background-color: rgba($color-warning, 0.1);
    }
  }

  &.m-tag-border {
    &.m-tag-primary {
      border: 2px solid $color-primary;
    }

    &.m-tag-success {
      border: 2px solid $color-success;
    }

    &.m-tag-warning {
      border: 2px solid $color-warning;
    }
  }

  &-primary {
    color: $color-primary;
  }

  &-success {
    color: $color-success;
  }

  &-warning {
    color: $color-warning;
  }
}
